<template>
  <div class="map-wrapper">
    <div id="map" class="google-map"></div>
    <div class="steps">
      <div class="step" v-for="(item, index) in data" :key="index">
        <div class="address">
          <el-button type="primary" circle>{{ index + 1 }}</el-button>
          <div class="add-name">{{ item.name }}</div>
        </div>
        <div class="line" v-if="index <= data.length - 2"></div>
      </div>
    </div>
  </div>
</template>

<script>
import data from "@/model";
export default {
  name: "secMap",
  props: {},
  components: {},
  data() {
    return {
      data: data,
      img: require("@/assets/images/2-2_po.png"),
    };
  },
  computed: {},
  mounted() {
    this.data = data.results;
    this.initMap();
  },
  methods: {
    async initMap() {
      const { Map } = await google.maps.importLibrary("maps");
      const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
      console.log("[AdvancedMarkerElement  ] >", AdvancedMarkerElement);

      this.map = new Map(document.getElementById("map"), {
        // mapTypeId: "satellite",//地图类型
        center: { lng: 116.404, lat: 39.915 }, //经度longitude，纬度latitude
        zoom: 15,
        mapId: "AIzaSyD9g_t_9BfItxADqAo6n5w0K9anuDS9mZs",
      });
      this.map.setTilt(45);
      this.initMarker(); //创建标记
    },
    //标记 以及连线
    initMarker() {
      // 线条设置
      var polyOptions = {
        strokeColor: "red", // 颜色
        strokeOpacity: 1.0, // 透明度
        strokeWeight: 2, // 宽度
      };
      let poly = new google.maps.Polyline(polyOptions);
      poly.setMap(this.map); // 装载

      this.data.forEach((item, index) => {
        console.log("[ item ] >", item);
        let { lat, lng } = item.location;
        const priceTag = document.createElement("div");
        priceTag.className = "price-tag";
        priceTag.textContent = index + 1;
        const markerView = new google.maps.marker.AdvancedMarkerView({
          map: this.map,
          position: { lat, lng },
          content: this.markerEle(index),
        });
        //连线处理
        var path = poly.getPath(); //获取线条的坐标
        path.push(new google.maps.LatLng(lat, lng)); //为线条添加标记坐标
      });
    },
    markerEle(index) {
      const content = document.createElement("div");
      content.innerHTML = `<div class="marker-img__box">
                    <img src="${this.img}" />
                    <div class="num">${index + 1}</div>
                </div>`;
      return content;
    },
    initLine() {},
  },
  watch: {},
};
</script>
<style lang="scss">
.price-tag {
  width: 40px;
  height: 40px;
  background: #ffff;
  border-radius: 50%;
  border: 2px solid red;
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  font-weight: 600;
  color: red;
}
.marker-img__box {
  position: relative;
  color: red;
  img {
    width: 50px;
  }
  .num {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -13px);
    font-size: 16px;
    font-weight: 600;
  }
}
</style>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.map-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  .steps {
    position: absolute;
    bottom: 0px;
    height: 80px;
    left: 0;
    right: 0;
    background: rgba(131, 56, 253, 0.8);
    padding: 0 20px;
    // background: #fff;
    // border-top: 1px solid #666;
    display: flex;
    align-items: center;
    overflow: auto;
    .step {
      position: relative;
      color: #ffff;
      z-index: 1;
      .address {
        width: 150px;

        .el-button {
          width: 35px;
          height: 35px;
          padding: 0;
          margin-bottom: 5px;
        }
      }
      .line {
        position: absolute;
        right: 0;
        left: 0;
        top: 18px;
        // background: #fff;
        height: 1px;
        border: 1px dashed #fff;
        z-index: -1;
      }
    }
  }
}
.google-map {
  width: 100%;

  height: 100%;
}
.gmnoprint {
  left: 50% !important;
  transform: translateX(-50%);
}
</style>
